<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-06-28 15:23:55
 * @LastEditors: zzb
 * @LastEditTime: 2022-12-14 11:02:43
-->
<template>
  <div class="read-container">
    <Resize v-if="['sgs', 'dev'].includes(city_name)">
      <template v-slot:left>
        <div class="read_l">
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              parentKey: 'siteId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
              reserve: true,
              accordion: true,
            }"
            class="left-table"
          >
            <vxe-column tree-node field="name" show-overflow>
              <template #default="{ row }">
                <span>
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="verticalalign: text-bottom"
                  />
                  <span
                    @click="haldleClickSite(row)"
                    style="cursor: pointer; fontsize: 12px; color: #000"
                  >
                    {{ row.siteName || row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="read_r">
          <el-tabs
            type="border-card"
            class="num-container"
            v-model="activeName"
            v-if="siteRow"
          >
            <el-tab-pane label="月年阅读量" name="yearRead" lazy>
              <YearRead :siteRow="siteRow"></YearRead>
            </el-tab-pane>
            <el-tab-pane label="各单位阅读量" name="depRead" lazy>
              <DepRead :siteRow="siteRow"></DepRead>
            </el-tab-pane>
            <el-tab-pane label="阅读量不足提示" name="readAlert" lazy>
              <ReadAlert :siteRow="siteRow"></ReadAlert>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </Resize>
    <span class="no_pro_menu" v-else>暂无该功能，仅对省公司开放</span>
  </div>
</template>

<script>
import { listSite } from "@/api/content/net";

import DepRead from "./depRead.vue";
import YearRead from "./yearRead.vue";
import ReadAlert from "./readAlert.vue";

export default {
  name: "Name",
  inject: ["city_name"],
  data() {
    return {
      // 当前tab
      activeName: "yearRead",
      //站点列表
      siteList: [],
      siteRow: undefined,
    };
  },

  components: { DepRead, YearRead, ReadAlert },

  computed: {},

  mounted() {
    if (["sgs"].includes(this.city_name)) {
      this.getSiteList();
    }
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    //获取站点列表
    getSiteList() {
      this.siteRow = undefined;
      listSite()
        .then((res) => {
          this.siteList = [
            { name: "WYCMS主站", root: "000", children: res.data },
          ];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },
    //点击站点
    haldleClickSite(row) {
      if (row.root == "000") {
        return;
      }
      this.siteRow = row;
      console.log(
        "🚀 ~ file: index.vue:100 ~ haldleClickSite ~ this.siteRow",
        this.siteRow
      );

      this.$store.dispatch("column/setSiteRow", row);
      // this.getChannelList();
      this.activeName = "yearRead";
    },

    changeComponent() {
      this.$emit("changeComponent");
    },
    openChannel() {
      this.$emit("openChannel");
    },
  },
};
</script>

<style scoped lang="scss">
.read-container {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  position: relative;
  border: 1px solid #ccc;
  .read_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      min-width: 240px;
    }
  }
  .read_r {
    overflow: overlay;
    overflow: auto;
    width: 100%;
    // padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    flex: 1;
  }
}
::v-deep .el-tabs__content {
  height: calc(100% - 70px);
  .el-tab-pane {
    height: 100%;
  }
}
.num-container {
  border: none;
}
</style>
